<!DOCTYPE html>
<html>
<head>
<!-- ejsejs模板引擎的重用 -->
	<% include head.ejs %>
	<style type="text/css">
	body{
		position: relative;
	}
		#main{
			position: absolute;
			width: 700px;
			height: 600px;
			left: 300px;
			top: 500px;
		}
	</style>
</head>
<body>
<div id="top">
	<div id="middle">
		<img src="#"/>
		<img src="#" />
		<img src="#"/>
		<img src="#"/>
	</div>
</div>
<div id="main">
	<form role="form" action="" method="post" enctype="multipart/form-data">
	<div class="form-group">
    <h1><label for="exampleInputFile">请上传你的头像</label></h1>
    <input type="file" name="upload" multiple="multiple">
  <button type="submit" class="btn btn-default">Submit</button>
   </form>
</div>
<footer>
</footer>
</body>
<script type="text/javascript">
//图片轮播
var imgs = document.getElementsByTagName('img');
var middle = document.getElementById('middle');
console.log(imgs.length);
var imgSrcs = ["../img/temp3.jpg","../img/temp2.png","../img/temp1.jpg","../img/temp3.jpg"];
var imgAlts = ["temp1","temp2","temp3","temp1"];
for(var i = 0;i<imgs.length;i++){
	imgs[i].src=imgSrcs[i];
	imgs[i].alt = imgAlts[i];
}
var maxWidth = (imgs.length-1)*imgs[0].offsetWidth;
var len = -middle.offsetWidth;
var timer = null;
timer = setInterval(function(){
	len -= 4;console.log(len);
	if(len<-maxWidth){
		len=0;
	}
	middle.style.left = len+'px';
},30);
//控制表单
var btn = document.getElementsByClassName('btn-default');
var form = document.getElementsByTagName('form');
var userImg = document.getElementsByClassName('userImg');
userImg.Style.visibility = "hidden";
btn.onclick = function(){
	form.style.visibility = "hidden";
	userImg.Style.visibility = "show";
}
</script>
</html>